<template>
  <div>
    <!-- 二级路由占位符 -->
    <!-- <router-view/> -->
    <router-view v-slot="{ Component }">
      <transition>
        <keep-alive>
          <component :key="$route.name" :is="Component" />
        </keep-alive>
      </transition>
    </router-view>


    <!-- 底层选项卡 -->
    <van-tabbar v-model="active" active-color="red">
      <van-tabbar-item replace to="/home/index">
        <span>首页</span>
        <template #icon="props">
          <img :src="require(`../assets/tabs/index_${props.active?1:0}.png`) " />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/video">
        <span>视频</span>
        <template #icon="props">
          <img :src="require(`../assets/tabs/video_${props.active?1:0}.png`)" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/show">
        <span>演出</span>
        <template #icon="props">
          <img :src="require(`../assets/tabs/show_${props.active?1:0}.png`)" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/me">
        <span>我的</span>
        <template #icon="props">
          <img :src="require(`../assets/tabs/me_${props.active?1:0}.png`)" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
//样式
const active = ref(0)
// 图标

</script>

<style scoped>

</style>
